<template>
  <div class="container">
    <el-row class="topContent boxBorder">
      <el-col :span="16">
        <div>
          <span class="titleTop">
            <i class="icon iconfont iconfanhui1" @click="toEmployeeList"></i>
            人员详情</span
          >
        </div>
      </el-col>
      <el-col :span="8" class="alignRight">
        <div>
          <el-button
            type="primary"
            icon="iconfont iconbianji"
            class="createSalaryBut"
            v-show="isOnEmployee == 1 && editBtn"
            @click="toEmployeeEdit"
          >
            <span class="opetareText">编辑</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <div class="mainCon">
      <!-- 身份信息 -->
      <div class="contentItems">
        <el-row>
          <el-col class="secondaryTitle secondaryTitleTheme" :span="20">
            <div>身份信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="21">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="8">
                  <span class="labelWidth">人员姓名：</span>
                  <span class="information">{{ employeeName || '--' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">身份证号：</span>
                  <span class="information">{{ idCard || '--' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">人员性别：</span>
                  <span class="information">{{ employeeSex || '--' }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span class="labelWidth">出生日期：</span>
                  <span class="information">{{ employeeBirth || '--' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">人员民族：</span>
                  <span class="information">{{ employeeNation || '--' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">文化程度：</span>
                  <span class="information">{{ edu || '--' }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <span class="labelWidth">婚姻状况：</span>
                  <span class="information">{{ maritalStatus || '--' }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">政治面貌：</span>
                  <span class="information">{{ politicalStatus || '--' }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <span class="labelWidth">家庭住址：</span>
                  <span class="information">{{ homeAddress || '--' }}</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="2" style="text-align: center" class="readIdCardBox">
            <div>
              <img
                :src="employeeImgUrl ? employeeImgUrl : errorPath"
                id="cardImg"
                style="width: 100px"
              />
            </div>
            <!-- <el-button size="mini" type="primary" class="onState" v-show="isOnEmployee == 1">在职</el-button> -->
            <span class="onState" v-show="isOnEmployee == 1">在职</span>
            <!-- <el-button size="mini" type="primary" class="outState" v-show="isOnEmployee == 0">离职</el-button> -->
            <span class="outState" v-show="isOnEmployee == 0">离职</span>
          </el-col>
        </el-row>
      </div>
      <!-- 不良，奖励信息 -->
      <div class="spacing" v-if="rewardsInfo.BAD || rewardsInfo.GOOD"></div>
      <div class="contentItems">
        <el-row v-if="rewardsInfo.BAD || rewardsInfo.GOOD">
          <el-col class="secondaryTitle secondaryTitleTheme" :span="20">
            <div>奖励记录</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo" v-if="rewardsInfo.BAD || rewardsInfo.GOOD">
          <el-col :span="21">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="8">
                  <span class="labelWidth">不良记录：</span>
                  <span class="information"
                    ><el-link
                      type="primary"
                      @click="toRewardsList('BAD')"
                      v-if="rewardsInfo.BAD > 0"
                      >查看</el-link
                    >
                    <span v-else>--</span></span
                  >
                </el-col>
                <el-col :span="8">
                  <span class="labelWidth">奖励信息：</span>
                  <span class="information"
                    ><el-link
                      type="primary"
                      @click="toRewardsList('GOOD')"
                      v-if="rewardsInfo.GOOD > 0"
                      >查看</el-link
                    >
                    <span v-else>--</span>
                  </span>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 基础信息 -->
      <div class="spacing"></div>
      <div class="contentItems">
        <el-row>
          <el-col class="secondaryTitle secondaryTitleTheme" :span="20">
            <div>基础信息</div>
          </el-col>
        </el-row>
        <el-row class="basicInfo">
          <el-col :span="21">
            <el-col :span="8">
              <span class="labelWidth">工资卡银行：</span>
              <span class="information">{{ bankId || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span class="labelWidth">工资卡号：</span>
              <span class="information">{{ accountId || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span class="labelWidth">手机号：</span>
              <span class="information">{{ tel || '--' }}</span>
            </el-col>
          </el-col>
          <el-col
            :span="2"
            style="text-align: center"
            class="readIdCardBox faceCameraPhotoBox"
          >
            <div>
              <img
                :src="collectImg ? collectImg : errorPath"
                style="width: 100px"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 合同信息 -->
      <div class="spacing"></div>
      <div class="contentItems">
        <el-row>
          <el-col class="secondaryTitle secondaryTitleTheme" :span="20">
            <div>合同信息</div>
          </el-col>
        </el-row>
        <el-row class="contractInfo">
          <el-col :span="21">
            <el-col :span="8">
              <span class="labelWidth">部门：</span>
              <span class="information">{{ orgName || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span class="labelWidth">职位：</span>
              <span class="information">{{ employeeType || '--' }}</span>
            </el-col>
            <el-col :span="8">
              <span class="labelWidth">雇佣周期：</span>
              <span class="information"
                >{{ startDate || '--' }}&nbsp;&nbsp;至&nbsp;&nbsp;{{
                  endDate || '--'
                }}</span
              >
            </el-col>
          </el-col>
          <el-col :span="21">
            <el-col :span="8">
              <span class="labelWidth">基本工资：</span>
              <span class="information">{{ standardSalary || '--' }}</span>
            </el-col>
          </el-col>
          <el-col :span="21">
            <el-col :span="1.5">
              <span class="labelWidth">合同附件：</span>
            </el-col>
            <el-col :span="19">
              <elementImage
                :upLoadFile="upLoadFile"
                :srcList="srcList"
                :oldSrcList="oldSrcList"
                :isDelFile="isDelFile"
                @changeSrcList="changeSrcList"
                :fileMarginLeft="fileMarginLeft"
              ></elementImage>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <el-row style="text-align: center; margin: 0px 0 40px">
        <el-col>
          <el-button class="commonBut" @click="toEmployeeList">返回</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'employeeDetail',
  data() {
    return {
      isDelFile: false,
      employeeName: '', //人员姓名
      idCard: '', //身份证号
      employeeSex: '', //性别
      employeeBirth: '', //出生日期
      tel: '', //手机号码
      employeeNation: '', //名族
      homeAddress: '', //家庭住址
      edu: '', //教育程度
      politicalStatus: '', //政治面貌
      maritalStatus: '', //婚姻状况
      bankId: '', //工资银行
      accountId: '', //工资卡号
      orgName: '', //部门
      // data: [], //日期区间
      startDate: '', //雇佣开始时间
      endDate: '', //雇佣结束时间
      employeeType: '', //职位
      standardSalary: '', //基本工资
      // employeeImgUrl: [], //员工身份证头像
      employeeImgUrl: '', //员工身份证头像
      errorPath: require('../../../static/img/employee/card.png'),
      contractImgUrl: [], //合同附件
      employeeId: '', //传过来的务工id
      contractId: '', //传过来的合同id
      isOnEmployee: 1, //在职1，离职0
      upLoadFile: [],
      srcList: [],
      oldSrcList: [],
      collectImg: '',
      editBtn: '',
      fileMarginLeft: 0,
      rewardsInfo: '',
    }
  },
  watch: {
    $route(to, from) {
      if (this.$route.name == 'employeeDetail') {
        this.employeeId = this.$route.query.employeeId
        this.contractId = this.$route.query.contractId
        //获取人员详情数据
        this.getBatchInfo(this.employeeId, this.contractId)
      }
    },
  },
  created() {
    this.employeeId = this.$route.query.employeeId
    this.contractId = this.$route.query.contractId
    //获取人员详情数据
    this.getBatchInfo(this.employeeId, this.contractId)
    this.editBtn =
      this.$store.state.buttonLimitsArr.indexOf('ncEmployeeOn:update') > -1
  },
  mounted() {},
  methods: {
    //返回人员列表
    toEmployeeList() {
      if (this.isOnEmployee == 1) {
        this.$router.push('/home/employee/employeeOn')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/employeeOn',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.isOnEmployee == 0) {
        this.$router.push('/home/employee/employeeOut')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/employeeOut',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //跳转到人员修改
    toEmployeeEdit(employeeId, contractId) {
      this.$router.push({
        path: '/home/employee/employeeEdit/',
        name: 'employeeEdit',
        query: {
          employeeId: this.employeeId,
          contractId: this.contractId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/employee/employeeOn',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getBatchInfo(employeeId, contractId) {
      this.axios({
        method: 'post',
        url: 'api-e/nc/employee/expand/employees',
        data: {
          id: employeeId,
          contractId: contractId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.employeeName = data.name
          this.idCard = data.idcard
          this.employeeSex = data.sexValue
          this.employeeBirth = data.birthday
          this.tel = data.tel
          this.employeeNation = data.nationalityValue
          this.homeAddress = data.address
          this.edu = data.eduValue
          this.maritalStatus = data.marriageValue
          this.politicalStatus = data.politicalValue
          this.bankId = data.bankValue
          this.accountId = data.accountId
          this.employeeType = data.employeeType
          this.orgName = data.orgName
          this.startDate = data.startDate
          this.endDate = data.endDate
          this.employeeType = data.employeeType
          this.standardSalary = data.standardSalary
          this.statusValue = data.statusValue
          this.employeeImgUrl = data.employeeImgFile.url
          this.upLoadFile = data.contractImgFile
          this.getCountbyemployee(data.name, data.idcard)
          if (data.statusValue == '在职') {
            this.isOnEmployee = 1
          } else if (data.statusValue == '离职') {
            this.isOnEmployee = 0
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }

          if (data.faceCameraPhoto) {
            this.collectImg = JSON.parse(data.faceCameraPhoto).url
          }
        })
        .catch((error) => {})
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    getCountbyemployee(name, idcard) {
      if (localStorage.getItem('judgeRoleCode') == 'company') {
        var searchType = 'nc'
      } else {
        var searchType = 'cs'
      }
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/countbyemployee',
        data: {
          idcard: idcard,
          name: name,
          searchType: searchType,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.rewardsInfo = res.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message.error('获取信息失败')
          }
        )
        .catch((error) => {})
    },
    // 跳转到列表
    toRewardsList(type) {
      var url = ''
      if (type == 'BAD') {
        url = '/home/worker/badRecord'
      } else {
        url = '/home/worker/rewards'
      }
      this.$router.push({ path: url, query: { name: this.employeeName } })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
      // this.$router.push({
      //     name: this.employeeName,
      //     path: url
      // });
      // this.$store.commit("GOBACK_NAME", {
      //     oldUrl: url,
      //     newUrl: this.$router.currentRoute.fullPath,
      // });
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .topContent {
    height: 54px;
    line-height: 54px;
    padding: 0 24px;
    .titleTop {
      font: bold 18px Microsoft YaHei;
      color: #333333;
      vertical-align: middle;
      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
    .alignRight {
      text-align: right;
    }
    .createSalaryBut {
      background: #009588;
      border: 1px solid #009588;
      padding: 0 23px;
      line-height: 32px;
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .mainCon {
    padding: 0;
    height: calc(100% - 67px);
    overflow-y: auto;
  }
  .contentItems {
    padding: 20px 24px;
  }
  .labelWidth {
    font-size: 14px;
    color: #333;
    display: inline-block;
    height: 36px;
  }
  .information {
    font-size: 14px;
    color: #666;
  }
  .titleInfo {
    height: 60px;
    font: 18px/60px Microsoft YaHei;
    border-bottom: 1px solid #dee5f4;
  }
  .identityInfo,
  .basicInfo,
  .contractInfo {
    padding: 18px 0 0px 0;
    padding-left: 14px;
  }
  .identityInfoTitle {
    color: #009588;
  }
  .basicInfoTitle {
    color: #67ace4;
  }
  .contractInfoTitle {
    color: #f9a243;
  }
  .readIdCardBox {
    img {
      width: 100px;
      margin-bottom: 6px;
    }
    .onState {
      margin-left: 4px;
      padding: 2px 10px;
      font-size: 14px;
      border-radius: 4px;
      color: #009588;
      border: 1px solid #009588;
      background: rgba(0, 149, 136, 0.1);
    }
    .outState {
      margin-left: 4px;
      padding: 2px 10px;
      font-size: 14px;
      border-radius: 4px;
      color: #bfc5cc;
      border: 1px solid #bfc5cc;
      background: rgba(191, 197, 204, 0.09);
    }
    @media only screen and (max-width: 1440px) {
      .onState,
      .outState {
        margin-left: 18px;
      }
    }
  }
  .imgStyle {
    margin-left: 16px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
}

.faceCameraPhotoBox {
  margin-top: -24px;
}
</style>
